<template>
<teleport  to="#modal">
    <div>
      <div id="center" v-if="isOpen" >
          <h2><slot>this is a 弹出层</slot></h2>
          <button @click="close">Close</button>
        </div>
    </div>
  </teleport>
</template>
<script>
// teleport   vue3新增的内置组件 可以让dom生成到 vue的#app管理范围之外
// 有时组件模板的一部分逻辑上属于该组件，
// 而从技术角度来看，最好将模板的这一部分移动到 DOM 中 Vue app 之外的其他位置。
import {defineComponent} from 'vue'
export default defineComponent({
  props:{
    isOpen:{
      type:Boolean,
      default:true
    }
  },
  // vue3 新增的emits 
  emits: { //规定好父子组件的触发事件名称
    'close-modal': null,
    'senddata':null
  },
  setup(props,context) {
    // 点击按钮触发父组件的事件close-modal
      let close=()=>{
         context.emit("close-modal",888)
      }
      return{
        close
      }
  }
})
</script>
<style lang="less">
    #center {
    width: 200px;
    height: 200px;
    border: 2px solid black;
    background: white;
    position: fixed;
    left: 50%;
    top: 50%;
    margin-left: -100px;
    margin-top: -100px;
  }
</style>